<template>
	<view class="Global">
		<!-- 背景图片铺满 -->
		<!-- <image class="imagepage" src="/static/background@2x.png" mode=""></image> -->
		<bgImage></bgImage>
		<MyNav :title="title" bgColor="" :backIcon="isback"></MyNav>


		<view class="contentInfo">
			<!-- 日历显示 -->
			<view class="contentCalendar">
				<view class="contentCalendarInner">
					<ren-calendar ref='ren' :markDays='markDays' :headerBar='true'
						@onDayClick='onDayClick'></ren-calendar>
				</view>
				<!-- <view class="change">选中日期：{{curDate}}</view> -->
			</view>
		<!-- 日历显示 -->
			<!-- 显示上下班打卡信息 -->
			<view class="contentBottom">
			
				<view class="contentBottomLeft">
					<text class="contentBottomLeftText">上班 08:30</text>
					<view class="contentBottomLeftBottom">
						<image src="/static/gongzuotai/rigth_logo.png" mode="widthFix"
							class="contentBottomLeftBottomImg">
						</image>
						<text class="contentBottomLeftBottomText">08:16已打卡</text>
					</view>
				</view>
			
				<view class="contentBottomLeft">
					<text class="contentBottomLeftText">下班 17:30</text>
					<view class="contentBottomLeftBottom">
						<image src="/static/gongzuotai/rigth_logo.png" mode="widthFix"
							class="contentBottomLeftBottomImg">
						</image>
						<text class="contentBottomLeftBottomText">08:16已打卡</text>
					</view>
				</view>
			</view>
			
			
			<!-- 显示上下班打卡信息 -->
			
			
			<!-- 补卡 非当天-->
			
			<view class="loginContent">
			
				<button @click="loginClick()" style="color:#ffffff" class="login"
					type="default">{{login}}</button>
			</view>
			<!-- 补卡 非当天 -->
		
		</view>




	

	</view>
</template>

<script>
	import MyNav from '@/components/customnavbar.vue'
	import bgImage from '@/components/backgroundImage.vue'
	import RenCalendar from '@/components/ren-calendar/ren-calendar.vue'

	export default {
		components: {
			MyNav,
			bgImage,
			RenCalendar

		},

		data() {
			return {
				title: '补卡',
				isback: true,
				curDate: '',
				markDays: [],
				login:'补卡'
			}
		},
		onReady() {
			let today = this.$refs.ren.getToday().date;
			this.curDate = today;
			this.markDays.push(today);
		},
		methods: {

			onDayClick(data) {
				this.curDate = data.date;

				console.log('选择日期', this.curDate);
			},
			
			// 点击补卡按键
			loginClick(){
				uni.navigateTo({
					url: '/subPack/replacementCard/replacementCardDetail/replacementCardDetail',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}

		}
	}
</script>

<style>
	.loginContent {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
	
	
	
	}
	
	.login {
		display: flex;
		justify-content: center;
	
		width: 630rpx;
		height: 100rpx;
	
		border-radius: 30rpx;
		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		font-weight: bold;
		margin-top: 30rpx;
	
		margin-bottom: 30rpx;
	
	
	
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);
	
	}
	
	.contentBottomLeftBottomText {
	
		display: flex;
	
		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
		line-height: 30rpx;
		margin-left: 20rpx;
		width: 100%;
	}
	
	.contentBottomLeftBottomImg {
	
		width: 30rpx;
		height: 30rpx;
		margin-left: 20rpx;
	}
	
	.contentBottomLeftBottom {
	
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
		width: 100%;
		
	
	
	}
	
	.contentBottomLeftText {
		display: flex;
		justify-content: left;
		align-items: center;
	
		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		line-height: 30rpx;
		
		width: 100%;
		padding-left: 30rpx;
		
	}
	
	.contentBottomLeft {
	
		width: 300rpx;
		height: 135rpx;
		background: #F5F7F9;
		border-radius: 20rpx;
	
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}
	
	.contentBottom {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		flex-direction: row;
		margin-top: 30rpx;
		width: 100%;
	}
	.contentCalendarInner {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		width: 670rpx;


	}

	.contentCalendar {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		width: 690rpx;



		background: #FFFFFF;
		border-radius: 30rpx;
	}

	.contentInfo {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		border-radius: 20rpx;
		background: #FFFFFF;

		margin-top: 30rpx;

	}
</style>